<!-- 消息首页 麦沃德科技暴雨 -->
<template>
  <view class="container">
    <view class="container-main">
      <view class="main-item" @click="toList(1)">
        <image src="/static/xx1.png" class="item-img"></image>
        <view class="item-txt">
          <view class="item-txt-top">订单消息</view>
          <view class="item-txt-bottom" v-if="runStatus == 1"
            >您有新的订单消息</view
          >
          <view class="item-txt-bottom" v-if="runStatus == 2"
            >暂无订单消息</view
          >
        </view>
        <view class="item-tip" v-if="runStatus == 1"></view>
      </view>
      <view class="main-item" @click="toList(2)">
        <image src="/static/xx2.png" class="item-img"></image>
        <view class="item-txt">
          <view class="item-txt-top">商家抢单消息</view>
          <view class="item-txt-bottom" v-if="supermarketStatus == 1"
            >您有新的商家抢单消息</view
          >
          <view class="item-txt-bottom" v-if="supermarketStatus == 2"
            >暂无商家抢单消息</view
          >
        </view>
        <view class="item-tip" v-if="supermarketStatus == 1"></view>
      </view>
      <view class="main-item" @click="toList(3)">
        <image src="/static/xx3.png" class="item-img"></image>
        <view class="item-txt">
          <view class="item-txt-top">贴吧消息</view>
          <view class="item-txt-bottom" v-if="postsStatus == 1"
            >您有新的贴吧评论消息</view
          >
          <view class="item-txt-bottom" v-if="postsStatus == 2"
            >暂无贴吧评论消息</view
          >
        </view>
        <view class="item-tip" v-if="postsStatus == 1"></view>
      </view>
    </view>
    <ikz-tabbar :show-data="tabbar_Data"></ikz-tabbar>
    <!-- <div @click="playText">60000毫秒</div> -->
  </view>
</template>

<script>
var app = getApp();
import ikz from "@/pages/Common/tools.js";
import ikzTabbar from "@/pages/Component/Public/tab-bar/tab-bar.vue";
export default {
  components: {
    ikzTabbar,
  },
  data() {
    return {
      // 跑腿消息
      runStatus: 2,
      // 外卖消息
      supermarketStatus: 2,
      // 贴吧消息
      postsStatus: 2,
      postId: 0,
      tabbar_Data: {
        type: 0,
        list: [],
      },
    };
  },
  onShow() {
    // this.playVoice();
    if (!uni.getStorageSync("local_user_session")) {
      uni.redirectTo({
        url: "/pages/login/index",
      });
      return;
    }
    this.tabbar_Data.list = app.globalData.tabBarInfo;
    this.tabbar_Data.type = app.globalData.tabBarInfo.length - 2;
    this.getBaseinfo();
    // 启动定时器
    this.startTimer();
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        this.getBaseinfo();
      }, 60000); // 1分钟 = 60000毫秒
    },
    // 播放语音提示
    playText() {
      // 如果存在之前的音频实例，先停止并销毁
      if (this.innerAudioContext) {
        this.innerAudioContext.stop();
        this.innerAudioContext.destroy();
        this.innerAudioContext = null;
      }

      console.log("播放了");
      // 创建新的 InnerAudioContext 实例
      this.innerAudioContext = uni.createInnerAudioContext();

      // 设置音频资源的 URL 和其他属性
      this.innerAudioContext.src =
        "https://dexinhebei.com/uploads/1745503268019.mp3";
      this.innerAudioContext.autoplay = true; // 可选，设置是否自动播放
      this.innerAudioContext.loop = false; // 可选，设置是否循环播放

      // 开始播放音频
      this.innerAudioContext.play();

      // 处理播放结束事件
      this.innerAudioContext.onEnded(() => {
        console.log("音频播放结束");
        // 在这里处理播放结束后的逻辑，比如播放下一首
      });

      // 处理播放错误事件
      this.innerAudioContext.onError((err) => {
        console.log("音频播放错误:", err);
        // 在这里处理播放错误
      });
    },

    // 跳转消息列表
    toList(type) {
      if (type == 1) {
        uni.navigateTo({
          url: "/pages/Message/list?type=" + type,
        });
        this.readEdit(type);
        // if(this.runStatus == 1){
        // 	uni.navigateTo({
        // 		url:"/pages/Message/list?type=" + type
        // 	})
        // 	this.readEdit(type)
        // }
      }
      if (type == 2) {
        uni.navigateTo({
          url: "/pages/Message/list?type=" + type,
        });
        this.readEdit(type);
        // if(this.supermarketStatus == 1){
        // 	uni.navigateTo({
        // 		url:"/pages/Message/list?type=" + type
        // 	})
        // 	this.readEdit(type)
        // }
      }
      if (type == 3) {
        if (this.postsStatus == 1) {
          this.readEdit(type);
          uni.navigateTo({
            url:
              "/pages/Component/forum/Program/index/listDetail?id=" +
              this.postId,
          });
        }
      }
    },
    // 获取是否有新消息
    getBaseinfo() {
      var path = "/xyb/message/is_read";
      var data = {
        token: uni.getStorageSync("local_user_session"),
        app_plat: "MP-WEIXIN",
      };
      ikz.get(path, data, (res) => {
        if (res.data.code) {
          this.runStatus = res.data.data.run_status;
          this.supermarketStatus = res.data.data.supermarket_status;
          this.postsStatus = res.data.data.posts_status;
          this.postId = res.data.data.order_post_id;
          if (res.data.data.user_run_cancel == 1) {
            this.playText();
          }
          // this.playText();
        }
      });
    },
    // 已读消息
    readEdit(type) {
      var path = "/xyb/message/edit";
      var data = {
        token: uni.getStorageSync("local_user_session"),
        app_plat: "MP-WEIXIN",
        type: type,
      };
      ikz.get(path, data, (res) => {
        if (res.data.code) {
        }
      });
    },
  },
};
</script>

<style lang="scss">
body {
  background: #f3f3f3;
}
.container {
  .container-main {
    padding: 0 32rpx;

    .main-item {
      display: flex;
      align-items: top;
      padding: 32rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin-top: 32rpx;

      .item-img {
        width: 96rpx;
        height: 96rpx;
      }
      .item-txt {
        flex: 1;
        padding-left: 32rpx;
        height: 96rpx;
        .item-txt-top {
          font-size: 28rpx;
          font-weight: 600;
          color: #333333;
        }
        .item-txt-bottom {
          padding-top: 20rpx;
          font-size: 28rpx;
          color: #999999;
        }
      }
      .item-tip {
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #fa5341;
      }
    }
  }
}
</style>
